<template>
    <c-modal
            :width="width"
            :visible="visible"
            :title="title"
            :top="20"
            :bottom="20"
            @cancel="cancel"
    >

        <Spin size="large" fix v-if="Loading"></Spin>
        <Tabs v-model="tabName">
            <Tab-pane label="任务处理" name="name1">
                <div class="overflowContent" :style="{height:height+'px'}" :key="key">
                    <div v-if="type=='apply'">
                        <application-apply ref="application"/>
                    </div>
                    <!--城市单人保-->
                    <div v-else-if="type=='change'">
                        <application-Change ref="application"/>
                    </div>
                    <!--变更-->
                    <div v-else>
                        <application-his ref="application"/>
                    </div>
                </div>
            </Tab-pane>
            <Tab-pane label="审批意见" name="name2">
                <div class="overflowContent" :style="{height:height+'px'}" :key="key">
                    <opinions ref="opinions"/>
                </div>
            </Tab-pane>
            <Tab-pane label="流程图" name="name3">
                <div class="overflowContent" :style="{height:height+'px'}" :key="key">
                    <application-image ref="img"/>
                </div>
            </Tab-pane>
            <Tab-pane label="核对结果" name="name4">
                <div class="overflowContent" :key="key">
                    <application-hd-result ref="applicationHdResult"/>
                </div>
            </Tab-pane>
        </Tabs>
        <div slot="footer">
        </div>
    </c-modal>
</template>

<script>
    import applicationHis from '../db_application_history/application';
    import applicationChange from '../db_application_approve/application_change_view';
    import applicationApply from '../db_application_approve/application_apply_view';
    import applicationImage from '../db_application_approve/applicationImage'
    import {postAction} from '@/api/request'
    import opinions from '../db_application_approve/applicationOpinions'
    import applicationHdResult from '../db_application_approve/applicationHdResult'

    export default {
        name: "application-modal",
        components: {
            applicationHis,
            applicationChange,
            applicationApply,
            applicationImage,
            opinions,
            applicationHdResult
        },
        data() {
            return {
                tabName: "name1",
                handleNum: 99,
                scrollable: true,
                title: "审批详情",
                visible: false,
                disableSubmit: false,
                width: 800,
                height: 400,
                model: {},
                familyInfo: {},
                buttonList: [],
                key: "",
                Loading: false,
                type:""
            }
        },
        methods: {
            edit(record) {
                this.tabName = "name1";
                this.visible = true;
                this.familyInfo = record;
                this.type=record.type;
                this.$nextTick(() => {
                    this.$refs.application.edit(record);
                    this.$refs.img.edit(record, this.key);
                    this.$refs.opinions.edit(record);
                    this.$refs.applicationHdResult.edit(record);
                });
            },
            cancel() {
                this.visible = false;
            },
        },
        created() {
            this.height = document.documentElement.clientHeight - 250;
        }
        ,
    }
</script>

<style scoped>
    #inforDiv {
        width: 100%;
        position: relative;
        margin-top: 20px;
        min-height: 200px;
    }

    #examinationButtonDiv {
        position: relative;
        margin-top: 20px;
        width: 100%;
        text-align: center;
    }

    .overflowContent {
        position: relative;
        width: 100%;
        overflow-y: auto;

    }

    /deep/ .ivu-modal-body {
        padding-top: 0px;
    }

    /deep/ .ivu-modal-footer {
        border-top: 0px;
        padding: 0px;
    }
</style>
